<template>
  <!-- 提示框 -->
  <div class="alsrtInfo" :style="{display: displayStsates}" ref="alertMsg">
    <div class="profPrompt_test">{{aletMsg}}</div>
  </div>
</template>

<script>
export default {
  name: "Prompt",
  data() {
    return {
      aletMsg: "", // 弹出框中的提示语
      displayStsates: "none"
    };
  },
  methods: {
    // 提示弹框
    alertDia(msg, toRouter) {
      this.displayStsates = "block";
      this.aletMsg = msg;
      // 延迟2秒后消失 自己可以更改时间
      window.setTimeout(() => {
        this.displayStsates = "none";
        if (toRouter != null) {
          this.$router.push({ name: toRouter });
        }
      }, 4000);
    }
  }
};
</script>

<style scoped>
.alsrtInfo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.1);
}
.alsrtInfo .profPrompt_test {
  width: 300px;
  height: 100px;
  z-index: 999;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  text-align: center;
  line-height: 100px;
  border: 1px solid #4eb6d3;
}
</style>